<!--  -->

<script setup lang='ts'>
import { onMounted, ref, reactive, toRefs, useSlots } from 'vue'
// defineExpose无需引入


// 六、props父传子
const props = defineProps({
  menu: {
    type: Object,
    default: {},
  },
  name: {
    type: String,
    default: ''
  },
  modelValue: String,
  age: Number
})

// 七、emit子传父
// 声明事件
// const emit = defineEmits(['updataName'])
// const changeName = () => {
//   // 执行
//   emit('updataName', 'TTom')
// }

// 八、v-model
const emit = defineEmits(['update:modelValue', 'update:age'])
const changeInfo = () => {
  // 触发父组件值更新
  emit('update:modelValue', 'Tom')
  emit('update:age', 30)
}

// 十、子组件ref变量和defineExpose
// 组件暴露自己的属性

const state = reactive({
  name: 'Jerry',
  age: '25岁'
})
// 将方法、变量暴露给父组件使用，父组件才可通过ref API拿到子组件暴露的数据
defineExpose({
  // 解构state
  ...toRefs(state),
  // 声明方法
  changeNames() {
    state.name = 'Tom'
  }
})

// 十一插槽
const slots = useSlots()
// 匿名插槽使用情况
const defaultSlot = reactive(slots.default && slots.default().length)
console.log('defaultSlot', defaultSlot);//2
// 具名插槽使用情况
const titleSlot = reactive(slots.title && slots.title().length)
console.log('titleSlot', titleSlot) // 3


</script>

<template>
  <div class="children">
    <p>这里是children</p>
    <p>{{ props.name }}</p>
    <div v-for="item in props.menu" :key="item.id">{{ item.name }}</div>
    <!-- <button @click="changeName">子传父</button> -->

    <span @click="changeInfo">我叫{{ modelValue }}，今年{{ age }}岁</span>

    <div>子组件helloword.vue</div>

    <!-- 十一、插槽slot -->
    <slot />
    <!-- // 具名插槽 -->
    <slot name="title" />
    <!-- // 作用域插槽 -->
    <slot name="footer" :scope="state" />
  </div>
</template>

<style  scoped>
.children {
  border: 1px solid black;
}
</style>